import { WeaTop, WeaLeftRightLayout, WeaAlertPage } from 'ecCom';
import { observer, inject } from 'mobx-react';
import { Spin } from 'antd';
import TaskList from './TaskList';
import DataViewRight from './view';
import { fillinTypes } from '../../constants/app'

@inject('edcDataViewStore')
@observer
export default class DataView extends React.Component {
    componentDidMount() {
        const { edcDataViewStore: store, location: { query } } = this.props;
        store.init(query);
    }
    render() {
        const { edcDataViewStore: store } = this.props;
        const { fillinType } = store;
        if (store.loadingPage) {
            return <div className="h100" style={{ textAlign: 'center', paddingTop: '300px' }}><Spin size="large" /></div>
        }
        if (!store.isRight) {
            return <WeaAlertPage><div>暂无权限</div></WeaAlertPage>
        }
        console.log('fillinType === fillinTypes.MULTI', fillinType)
        return (
            <WeaTop
                title={`${store.title}${store.subTitle}`}
                iconBgcolor="#1a57a0"
                icon={<i className="icon-coms02-Data-center" />}
                loading={store.loading}
            >
                {fillinType === fillinTypes.MULTI ?
                    <WeaLeftRightLayout
                        leftWidth={300}
                        leftCom={<TaskList store={store} />}
                        onCollapse={store.onCollapse}
                    >
                        <DataViewRight store={store} />
                    </WeaLeftRightLayout>
                    : fillinType === fillinTypes.FREE ?
                        <DataViewRight store={store} /> : null

                }
                {
                    store.hide ?
                        <div className="edc-data-mask" onClick={() => { store.hide && store.changeHide(false) }}>
                        </div>
                        : null
                }

            </WeaTop>
        )
    }
}